<template>
  <svg aria-hidden="true" class="svg-icon" :style="[iconStyle]">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    prefix: {
      type: String,
      default: '#icon',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '#000',
    },
    size: String,
    height: String,
    width: String,
  },
  computed: {
    iconStyle() {
      const widthVal = this.size || this.width || 26
      const height = uni.upx2px(this.height || widthVal) + 'px'
      const width = uni.upx2px(widthVal) + 'px'
      return {
        color: this.color,
        width,
        height,
      }
    },
    symbolId() {
      return `${this.prefix}-${this.name}`
    },
  },
}
</script>

<style scoped lang="scss">
.svg-icon {
  fill: currentColor;
}
</style>
